<template>
	
  <uv-tabbar :value="data.tabActive" @change="tabChange" :border="false"
    customStyle="border-top-right-radius:20px;border-top-left-radius:20px;box-shadow: 0rpx -1rpx 7rpx 0rpx rgba(0,0,0,0.05);">
    <template v-for="(item, index) in data.tabbarList" :key="index">
      <uv-tabbar-item v-if="index < 3" :text="item.name" :name="index"
        :icon="currentPageRoute == item.path ? item.iconSelect : item.icon">
      </uv-tabbar-item>
      <uv-tabbar-item v-if="index == 3 && (data.userInfo.position_id == 12 || data.userInfo.position_id == undefined)" :name="index">
        <template v-slot:active-icon>
          <view class="add-box">
            <view class="iconfont icon-tianjia"></view>
          </view>
        </template>
        <template v-slot:inactive-icon>
          <view class="add-box">
            <view class="iconfont icon-tianjia"></view>
          </view>
        </template>
      </uv-tabbar-item>
      <uv-tabbar-item v-if="index == 4 && [10, 1, 2, 6, 7].includes(data.userInfo.position_id)" :text="item.name"
        :name="index" :icon="currentPageRoute == item.path ? item.iconSelect : item.icon">
      </uv-tabbar-item>
    </template>
  </uv-tabbar>
</template>

<script setup>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  onMounted,
  computed,
  watch
} from 'vue';
import {
  onShow,
  onLoad,
  onPageScroll
} from '@dcloudio/uni-app';
let props = defineProps({
  status: {
    type: Boolean,
    default: () => {
      return false;
    }
  }
});

const data = reactive({
  userInfo: '',
  tabbarList: [{
    name: '首页',
    icon: '/static/image/home.png',
    iconSelect: '/static/image/home-select.png',
    path: 'pages/index/index'
  }, {
    name: '项目',
    icon: '/static/image/xm.png',
    iconSelect: '/static/image/xm-select.png',
    path: 'pagesA/project/project'
  }, {
    name: '通知',
    icon: '/static/image/tz.png',
    iconSelect: '/static/image/tz-select.png',
    path: 'pagesA/message/message'
  }, {
    name: '',
    path: 'pagesA/add_project/add_project'
  }, {
    name: '看板',
    icon: '/static/image/kb.png',
    iconSelect: '/static/image/kb-select.png',
    path: 'pagesA/statistics/statistics'
  }],
  tabActive: 1,
})
let {
  tabActive,
  userInfo,
  tabbarList
} = toRefs(data);
const currentPageRoute = computed(() => {
  var pages = getCurrentPages();
  var page = pages[pages.length - 1];
  return page.route;
});
onShow(() => {
  data.userInfo = uni.getStorageSync('userInfo');
  var pages = getCurrentPages();
  var page = pages[pages.length - 1];
  let index = data.tabbarList.findIndex((item) => {
    return item.path == page.route;
  });
  data.tabActive = index;
});

const tabChange = (e) => {
  if (!data.tabbarList[e].path) return;
  if (data.userInfo.empower == 0 || !data.userInfo) {
    uni.navigateTo({
      url: '/pagesA/login/login'
    })
    return;
  }
  console.log(data.tabbarList, e);
  if (!data.tabbarList[e].iconSelect) {
    uni.navigateTo({
      url: '/' + data.tabbarList[e].path
    });
    return;
  }
  uni.reLaunch({
    url: '/' + data.tabbarList[e].path
  });
};


// const statusText = computed(() => {
// 	// 这里可以做i18n国际化相关操作，可以通过uni.getLocale()获取当前语言(具体操作见i18n-demo.vue);
// 	// 获取到当前语言之后，就可以自定义不同语言下的展示内容了
// 	const statusTextArr = ['哎呀，用点力继续下拉！', '拉疼我啦，松手刷新~~', '正在努力刷新中...', '刷新成功啦~'];
// 	return statusTextArr[props.status];
// });

// let emits = defineEmits(['onPass', 'onRefuse']);
// const onPass = (row, index) => {
// 	emits('onPass', row, index);
// };
// const onRefuse = (row, index) => {
// 	emits('onRefuse', row, index);
// };
// export default {
// 	data() {
// 		return {};
// 	},
// 	computed: {
// 		statusText() {
// 			// 这里可以做i18n国际化相关操作，可以通过uni.getLocale()获取当前语言(具体操作见i18n-demo.vue);
// 			// 获取到当前语言之后，就可以自定义不同语言下的展示内容了
// 			const statusTextArr = ['哎呀，用点力继续下拉！', '拉疼我啦，松手刷新~~', '正在努力刷新中...', '刷新成功啦~'];
// 			return statusTextArr[this.status];
// 		}
// 	},
// 	props: {
// 		status: {
// 			type: Number,
// 			default: function () {
// 				return 0;
// 			}
// 		}
// 	}
// };
</script>

<style scoped lang="scss">
.icon {
  width: 36rpx;
  height: 36rpx;
}

.add-box {
  width: 70rpx;
  height: 70rpx;
  background: #3b75ff;
  box-shadow: 0rpx 5rpx 19rpx 0rpx rgba(38, 85, 197, 0.26);
  border-radius: 50%;
  color: #fff;
  font-size: 65rpx;
  line-height: 70rpx;
  text-align: center;

  .icon-tianjia {
    font-size: 32rpx;
    font-weight: bolder;
  }
}
</style>